<template>
    <div class="app-container">
        <el-card class="tip" >
            <el-button @click="$router.push('/question/index')" type="text" style="margin-left: 16px;margin-bottom: 15px;">
                回到上一级
            </el-button>
            <el-divider></el-divider>
            <el-button @click="drawer = true" type="text" style="margin:15px 0px 16px 15px;">
                答题卡展开
            </el-button>
        </el-card>
        <el-drawer
            title=""
            :visible.sync="drawer"
            direction="ltr"
            :with-header="false">
            <span v-for="item,index in totalQuestion" :key="index" @click="jumpToQuestion(item.questionId)" >
                <el-tag :type="getTagType(item.correct)" class="exam-tag">{{ index+1}}</el-tag>
            </span>
        </el-drawer>
        <el-card class="answer-area" v-loading="loading">
            <div class="box">
                <div v-if="form.questionType == 1" class="item">
                    <div>
                        {{ getOrder(form.id) }}、({{ getType(form.questionType)}})<div style="display: inline-block;" v-html=" form.questionName "></div>
                    </div>
                    <div>
                        <el-radio-group v-model="form.practiceAnswer">
                            <p><el-radio  label="A">A：<p class="answer-item" v-html="form.answerA"></p></el-radio></p>
                            <p><el-radio  label="B">B：<p class="answer-item" v-html="form.answerB"></p></el-radio></p>
                            <p><el-radio  label="C">C：<p class="answer-item" v-html="form.answerC"></p></el-radio></p>
                            <p><el-radio  label="D">D：<p class="answer-item" v-html="form.answerD"></p></el-radio></p>
                        </el-radio-group>
                    </div>
                    <div class="show-answer" v-if="form.correct !== null">
                        <p class="p-item">
                            结果：<el-tag class="tag-result" type="success" v-if="form.correct">正确</el-tag>
                            <el-tag class="tag-result" type="danger" v-if="!form.correct">错误</el-tag>
                        </p>
                        <div class="p-item">
                            标准答案：{{ form.correctAnswer }}
                            <br>
                            解析：<p class="answer-desc" v-html="form.questionDesc"></p>
                        </div>
                    </div>
                </div>
                <div v-if="form.questionType == 2" class="item">
                    {{ getOrder(form.id) }}、({{ getType(form.questionType)}})<div style="display: inline-block;" v-html=" form.questionName "></div>
                    <div>
                        <el-checkbox-group v-model="mutis">
                            <p><el-checkbox  label="A">A：<p class="answer-item" v-html="form.answerA"></p></el-checkbox></p>
                            <p><el-checkbox  label="B">B：<p class="answer-item" v-html="form.answerB"></p></el-checkbox></p>
                            <p><el-checkbox  label="C">C：<p class="answer-item" v-html="form.answerC"></p></el-checkbox></p>
                            <p><el-checkbox  label="D">D：<p class="answer-item" v-html="form.answerD"></p></el-checkbox></p>
                        </el-checkbox-group>
                    </div>
                    <div class="show-answer" v-if="form.correct !== null">
                        <p class="p-item">
                            结果：<el-tag class="tag-result" type="success" v-if="form.correct">正确</el-tag>
                            <el-tag class="tag-result" type="danger" v-if="!form.correct">错误</el-tag>
                        </p>
                        <div class="p-item">
                            标准答案：{{ form.correctAnswer }}
                            <br>
                            解析：<p class="answer-desc" v-html="form.questionDesc"></p>
                        </div>
                    </div>
                </div>
                <div v-if="form.questionType == 3" class="item">
                    {{ getOrder(form.id) }}、({{ getType(form.questionType)}})<div style="display: inline-block;" v-html=" form.questionName "></div>
                    <div>
                        <el-radio-group v-model="form.practiceAnswer">
                            <p class="judge-answer-item"><el-radio  label="是">A：正确</el-radio></p>
                            <p class="judge-answer-item"><el-radio  label="否">B：错误</el-radio></p>
                        </el-radio-group>
                    </div>
                    <div class="show-answer" v-if="form.correct !== null">
                        <p class="p-item">
                            结果：<el-tag class="tag-result" type="success" v-if="form.correct">正确</el-tag>
                            <el-tag class="tag-result" type="danger" v-if="!form.correct">错误</el-tag>
                        </p>
                        <div class="p-item">
                            标准答案：{{ form.correctAnswer == '是' ?'正确':'错误' }}
                            <br>
                            解析：<p class="answer-desc" v-html="form.questionDesc"></p>
                        </div>
                    </div>
                </div>
                <div class="operation">
                    <el-button type="primary" class="btn" @click="previous" >上一题</el-button>
                    <el-button type="success" class="btn" @click="submit">确认</el-button>
                    <el-button type="warning" class="btn" @click="next">下一题</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import {getAnswerCard,getQuestion,correctQuestion} from '@/api/practice/practice'
export default {
    name:'Practice',
    data(){
        return{
            current:0,
            // 题目总数
            total:3,
            drawer:false,
            form:{
                id:null,
                questionName:'',
                questionType:null,
                answerA:'',
                answerB:'',
                answerC:'',
                answerD:'',
                practiceAnswer:'',
                correct:null,
                correctAnswer:'',
                questionDesc:'',
                subjectId:''
            },
            mutis:[],
            totalQuestion:[],
            queryForm:{
                subjectId:null,
                lastQuestion:null,
                questionId:null
            },
            questionEnum:[
                {key:1,value:"单选题"},
                {key:2,value:"多选题"},
                {key:3,value:"判断题"},
                {key:4,value:"简答题"}
            ],
            loading:false
        }
    },
    mounted(){
        let subjectId = this.$route.query.id;
        this.queryForm.subjectId = subjectId;
        this.form.subjectId = subjectId;
        this.queryForm.lastQuestion = this.$route.query.lastQuestion;
        // 初始化答题卡
        this.initAnswerCard();
        // 初始化题目
        this.search();
    },
    beforeDestroy(){
    },
    methods:{
        previous(){
            if(this.current <= 1){
                this.$message.info("已经是第一题了");
                return;
            }
            this.mutis = [];
            this.resetForm();
            this.queryForm.questionId = this.getQuestionId(--this.current);
            this.search();
            this.toArrayOrString(this.form.practiceAnswer);
        },
        next(){
            if(this.current == this.total){
                this.$message.info("已经是最后一题了");
                return;
            }
            this.mutis = [];
            this.resetForm();
            this.queryForm.questionId = this.getQuestionId(++this.current);
            this.search();
        },
        submit(){
            if(this.form.questionType == 2){
                this.toArrayOrString(this.mutis);
                console.log(this.mutis);
            }
            let id = this.form.id;
            this.form.subjectId = this.queryForm.subjectId;
            let item = this.totalQuestion.filter(item => {return item.questionId == id});
            if(this.form.correct != null ){
                this.$message.info("请勿重复提交");
                return;
            }
            if(this.form.practiceAnswer == '' || this.form.practiceAnswer == null){
                this.$message.warning("请选择答案");
                return;
            }
            correctQuestion(this.form).then(resp =>{
                this.form.correct = resp.data;
                item[0].correct = resp.data;
            })
        },
        // 根据答题卡跳到某一个题目
        jumpToQuestion(val){
            this.queryForm.questionId = val;
            this.search();
            this.drawer = false;
        },
        async initAnswerCard(){
            let res = await getAnswerCard(this.queryForm.subjectId);
            this.totalQuestion = res.data;
            console.log(this.totalQuestion);
            this.total = this.totalQuestion.length;
        },
        async search(){
            this.loading = true;
            let res = await getQuestion(this.queryForm);
            this.form = res.data;
            if(this.form.questionType == 2 && this.form.practiceAnswer != null && this.form.practiceAnswer != ''){
                this.toArrayOrString(this.form.practiceAnswer)
            }
            this.loading = false;
        },

        resetForm(){
                this.form.id = null,
                this.form.questionName = '',
                this.form.questionType = null,
                this.form.answerA = '',
                this.form.answerB = '',
                this.form.answerC = '',
                this.form.answerD = '',
                this.form.practiceAnswer = null,
                this.form.correct = null,
                this.form.correctAnswer = '',
                this.form.questionDesc = '',
                this.form.subjectId = ''
        },
        getTagType(val){
            if(val == true){
                return 'success';
            }
            if(val == false){
                return 'danger';
            }
            return 'info';
        },
        getType(val){
            let name = "";
            this.questionEnum.forEach(el=>{
                if(el.key == val){
                    name = el.value;
                    return;
                }
            })
            return name;
        },
        toArrayOrString(val){
            if(typeof(val) === 'string'){
                this.mutis = val.split(',');
            }else{
                this.form.practiceAnswer = '';
                this.mutis.sort();
                for(let i = 0 ; i< this.mutis.length ; i++){
                    if(i == this.mutis.length - 1){    
                        this.form.practiceAnswer += this.mutis[i];
                    }else{
                        this.form.practiceAnswer = this.form.practiceAnswer + this.mutis[i] +",";
                    }
                }
            }
        },
        getOrder(val){
            // filter会报错
            for(let i = 0 ; i < this.totalQuestion.length ; i++){
                if(val == this.totalQuestion[i].questionId){
                    this.current = this.totalQuestion[i].itemOrder;
                    return this.current;
                }
            }
        },
        getQuestionId(val){
            for(let i = 0 ; i< this.totalQuestion.length ;i++){
                if(val == this.totalQuestion[i].itemOrder){
                    return this.totalQuestion[i].questionId;
                }
            }
            // let item = this.totalQuestion.filter(item=>  item.itemOrder == val);
            // return item[0].questionId;
        }
    },
    computed:{
    },
    watch:{
    }

}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .tip{
        width: 20%;
        height: 80%;
        position: fixed;
        margin-top: 3%;
    }
    .exam-tag{
        height: 30px;
        width: 30px;
        margin: 10px 8px 10px 6px;
        line-height: 25px;
        float: left;
    }
    .exam-tag:hover{
        cursor: pointer;
    }
    .answer-area{
        margin-top: 3%;
        width: 75%;
        margin-left: 22%;
        height: 80%;
        position: fixed;
    }
    .p-item{
        font-size: 14px;
        font-family: '楷体';
        padding-top: 0px;
    }
    /* p{
        padding:15px 15px;
    } */
    .item{
        text-align: left;
        margin-left: 20px;
        padding-top: 20px;
    }
    .tag-result{
        width: 50px;
        height: 25px;
        text-align: center;
        line-height: 24px;
    }
    .operation{
        width: 100%;
        padding-top: 40px;
    }   
    .btn{
        height: 30px;
        width: 80px;
        margin:0px 30px 0px 30px ;
    }

    .answer-item{
        display: inline-block;
        margin: 0px;
    }
    .answer-desc{
        display: inline-block;
    }
    .judge-answer-item{
        padding: 10px;
    }
</style>